<script setup>
import axios from 'axios';
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const article = ref(null);
const route = useRoute();
const router = useRouter();

onMounted(() => {
  const artId = route.params.artId;
  axios.get(`http://geek.itheima.net/v1_0/articles/${artId}`)
      .then(response => {
        article.value = response.data.data;
      })
      .catch(error => {
        console.error('Error fetching article details:', error);
      });
});

const onClickLeft = function () {
  router.back();
}
</script>


<template>
  <div v-if="article">
    <a href="#"><i class="toutiao toutiao-gengduo"></i></a>
    <van-nav-bar
        title="详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        class="bg-light"
    />
    <div class="h6">{{ article.title }}</div>
    <div id="title">
      <p>发布日期: {{ article.pubdate }}</p>
      <p id="name">作者: {{ article.aut_name }}</p>
    </div>
    <div v-html="article.content" class="content"></div>
    <div id="bottom">
      <p><i class="toutiao toutiao-wenda"></i>评论数: {{ article.comm_count }}</p>
      <p><i class="toutiao toutiao-yuedu"></i>阅读数: {{ article.read_count }}</p>
      <p><i class="toutiao toutiao-dianzan"></i>点赞数: {{ article.like_count }}</p>
    </div>
  </div>
  <div v-else>
    <p>加载中...</p>
  </div>
</template>

<style scoped>
@import "~@/assets/bootstrap.min.css";
*{
  margin: 0;
  padding: 0;
}
a{
  position: fixed;
  top: 50px;
  right: 10px;
}
#title{
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: grey;
  margin-top: 5px;
}
img{
  width: 100%;
  height: auto;
}
#bottom{
  position: fixed;
  bottom: 5px;
  display: flex;
  font-size: 10px;
  color: black;
}
#bottom>p{
  margin-left: 20px;
}
</style>